<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河南理工大学测绘学院可视化</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        #cesiumContainer {
            width: 100%;
            height: 100vh;
        }

        .btnbox {
            display: flex;
            justify-content: center;
            position: fixed;
            z-index: 1;
            width: 100%;
        }

        .btn {
            opacity: 50%;
            height: 40px;
            border-radius: 30%;
            font-size: 8px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
        <div class="btnbox">
            <button id="change" class="btn">山阳区掩膜提取</button>
            <button id="showall" class="btn">测绘学院3D模型展示和校园建筑白模加载</button>
            <select name="weather" id="weather" class="btn">
                <option>天气变换</option>
                <option value="0">雨天</option>
                <option value="1">雾天</option>
                <option value="2">雪天</option>
                <option value="3">晴天</option>
            </select>
            <!-- <button id="weather" class="btn">切换天气</button> -->
            <button id="tip" class="btn">操作提示</button>
        </div>
    </div>
    <script type="module">
        // Your access token can be found at: https://ion.cesium.com/tokens.
        // This is the default access token from your ion account
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlNjBmNWYwNy02YzQxLTRhYzUtODI0YS0yOWNiMjEwZjViYTQiLCJpZCI6MjI0MTMzLCJpYXQiOjE3MTkyMTI0MzR9.AwJN1kaOx6mooEaziybnAihoKO6_vPsX63aPDd81uTA';

        // Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. 
        // STEP 2 CODE
        // Initialize the viewer with Cesium World Terrain.
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            animation: false, //是否显示动画控件
            homeButton: false, //是否显示home键
            geocoder: false,// 查询
            baseLayerPicker: false, //是否显示图层选择控件
            timeline: false, //是否显示时间线控件
            fullscreenButton: false, //是否全屏显示
            scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
            infoBox: false, //是否显示点击要素之后显示的信息
            sceneModePicker: true, //是否显示投影方式控件  三维/二维
            navigationHelpButton: false, //是否显示帮助信息控件
            skyAtmosphere: false,
            contextOptions: {
                webgl: {
                    alpha: true,
                },
            },

        });

        // 隐藏版权
        viewer._cesiumWidget._creditContainer.style.display = "none";

        viewer.scene.camera.setView({
            //设置经纬度，高度
            destination: Cesium.Cartesian3.fromDegrees(113, 34, 3000000),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-70),
                roll: Cesium.Math.toRadians(-5),
                //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。
            },
        });

        //掩膜函数
        function dd(geojson, viewer) {
            geojson = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "adcode": 410811, "name": "山阳区", "center": [113.26766, 35.21476], "centroid": [113.234621, 35.191212], "childrenNum": 0, "level": "district", "acroutes": [100000, 410000, 410800], "parent": { "adcode": 410800 } }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[113.191273, 35.177586], [113.190216, 35.177676], [113.190096, 35.178718], [113.188339, 35.179813], [113.187979, 35.181655], [113.185865, 35.181439], [113.181534, 35.180806], [113.180948, 35.180934], [113.17976, 35.184827], [113.179299, 35.187016], [113.177513, 35.186781], [113.177422, 35.187252], [113.175586, 35.187025], [113.175269, 35.188166], [113.173672, 35.188089], [113.173201, 35.190072], [113.172213, 35.189993], [113.171765, 35.192057], [113.170486, 35.191988], [113.170149, 35.193551], [113.169429, 35.193644], [113.170109, 35.194081], [113.167084, 35.193927], [113.167054, 35.193997], [113.163992, 35.193804], [113.163881, 35.194252], [113.161915, 35.194015], [113.161925, 35.193527], [113.161516, 35.193536], [113.161794, 35.191415], [113.161097, 35.191375], [113.161378, 35.189401], [113.160289, 35.188933], [113.160698, 35.186032], [113.163051, 35.186295], [113.163152, 35.183954], [113.163023, 35.183684], [113.160946, 35.183627], [113.158221, 35.184214], [113.158322, 35.183794], [113.156854, 35.183805], [113.15391, 35.183589], [113.153351, 35.185313], [113.1527, 35.185154], [113.153141, 35.183871], [113.152542, 35.183862], [113.152193, 35.185014], [113.150096, 35.184016], [113.149726, 35.184508], [113.149098, 35.184117], [113.148509, 35.185511], [113.146573, 35.187205], [113.143756, 35.18692], [113.143047, 35.189502], [113.141601, 35.189489], [113.138464, 35.189058], [113.138035, 35.190076], [113.132034, 35.186959], [113.130821, 35.180382], [113.125142, 35.179144], [113.122802, 35.1738], [113.115132, 35.171716], [113.113925, 35.156689], [113.112932, 35.156836], [113.1129, 35.156465], [113.112104, 35.156348], [113.111513, 35.153692], [113.109675, 35.15197], [113.108977, 35.146912], [113.105294, 35.146547], [113.105178, 35.143751], [113.101396, 35.144059], [113.099418, 35.143907], [113.093941, 35.140114], [113.093219, 35.12344], [113.098903, 35.122952], [113.102093, 35.120503], [113.104446, 35.120257], [113.111729, 35.121704], [113.124684, 35.12177], [113.134079, 35.120252], [113.138353, 35.117029], [113.141973, 35.11649], [113.142308, 35.117064], [113.152326, 35.116704], [113.152779, 35.115007], [113.154925, 35.115146], [113.155115, 35.111846], [113.152195, 35.111833], [113.15253, 35.111014], [113.1525, 35.105377], [113.150517, 35.105608], [113.149118, 35.105337], [113.149044, 35.102466], [113.153166, 35.102191], [113.157928, 35.097864], [113.17481, 35.099466], [113.174391, 35.105018], [113.174399, 35.106552], [113.176096, 35.106717], [113.176057, 35.107929], [113.176774, 35.107947], [113.176407, 35.112332], [113.187494, 35.113443], [113.191335, 35.113866], [113.191463, 35.113951], [113.191187, 35.11699], [113.191586, 35.117861], [113.192555, 35.11811], [113.192325, 35.122384], [113.190677, 35.122386], [113.190648, 35.125068], [113.209437, 35.129067], [113.209257, 35.131568], [113.215158, 35.132804], [113.229536, 35.136282], [113.232518, 35.136856], [113.237588, 35.138132], [113.240872, 35.138798], [113.243016, 35.138805], [113.247803, 35.137355], [113.252667, 35.136755], [113.254537, 35.136482], [113.259077, 35.134388], [113.259102, 35.134302], [113.264931, 35.131643], [113.265545, 35.128372], [113.268457, 35.127472], [113.294963, 35.125306], [113.295081, 35.132081], [113.300829, 35.132426], [113.301359, 35.124863], [113.309965, 35.124159], [113.316861, 35.11939], [113.317048, 35.122021], [113.329577, 35.121757], [113.330796, 35.122842], [113.33699, 35.122945], [113.336917, 35.12487], [113.339471, 35.123935], [113.339597, 35.125248], [113.337732, 35.125044], [113.337712, 35.125673], [113.336039, 35.125572], [113.335948, 35.12648], [113.333011, 35.126287], [113.332933, 35.1291], [113.331521, 35.129127], [113.331489, 35.131007], [113.329463, 35.130743], [113.329473, 35.132274], [113.327088, 35.13234], [113.32699, 35.134432], [113.32699, 35.137116], [113.326657, 35.137085], [113.32679, 35.140008], [113.327921, 35.14116], [113.328062, 35.140802], [113.330939, 35.141347], [113.330619, 35.14427], [113.324363, 35.142918], [113.324115, 35.142588], [113.321417, 35.142671], [113.321488, 35.143734], [113.316437, 35.143353], [113.316398, 35.145075], [113.313289, 35.14486], [113.31305, 35.14652], [113.312648, 35.14654], [113.312557, 35.147061], [113.310825, 35.146888], [113.311145, 35.144765], [113.309201, 35.144602], [113.309512, 35.142511], [113.305624, 35.142214], [113.305712, 35.140292], [113.299824, 35.139271], [113.299922, 35.138712], [113.298259, 35.138268], [113.297658, 35.138888], [113.295554, 35.137254], [113.294682, 35.136863], [113.294482, 35.137153], [113.294312, 35.138563], [113.291518, 35.138259], [113.291878, 35.139751], [113.291408, 35.140072], [113.290486, 35.139999], [113.290496, 35.140351], [113.289796, 35.14027], [113.289597, 35.142652], [113.287392, 35.142478], [113.287362, 35.145122], [113.285098, 35.144849], [113.28479, 35.147191], [113.280264, 35.146696], [113.280333, 35.145205], [113.276839, 35.145133], [113.276819, 35.146544], [113.276179, 35.146553], [113.276189, 35.145102], [113.274927, 35.145082], [113.274898, 35.146582], [113.274326, 35.14654], [113.273737, 35.149834], [113.272567, 35.149744], [113.272577, 35.150015], [113.269243, 35.149942], [113.268647, 35.155352], [113.269825, 35.15551], [113.271, 35.156166], [113.272744, 35.159917], [113.2744, 35.16079], [113.278675, 35.161579], [113.280505, 35.162105], [113.282252, 35.162978], [113.283385, 35.164462], [113.284171, 35.165856], [113.284694, 35.16734], [113.286177, 35.169086], [113.288096, 35.169699], [113.289143, 35.170311], [113.290015, 35.171619], [113.290713, 35.173191], [113.291935, 35.177029], [113.29329, 35.180648], [113.294197, 35.182464], [113.295594, 35.183862], [113.297619, 35.184702], [113.318078, 35.189689], [113.319268, 35.19025], [113.319616, 35.191155], [113.31913, 35.205318], [113.319337, 35.206852], [113.319897, 35.207762], [113.321853, 35.20874], [113.324368, 35.209305], [113.326534, 35.210006], [113.328071, 35.211683], [113.329269, 35.214546], [113.326714, 35.215581], [113.325514, 35.216594], [113.324068, 35.217521], [113.32224, 35.21804], [113.320411, 35.218163], [113.317457, 35.219839], [113.315661, 35.220035], [113.315577, 35.223482], [113.316597, 35.230102], [113.318726, 35.237873], [113.318894, 35.240992], [113.316659, 35.24334], [113.315373, 35.245607], [113.312128, 35.250121], [113.308033, 35.25416], [113.306346, 35.260402], [113.304525, 35.263426], [113.305092, 35.265141], [113.309992, 35.267138], [113.310376, 35.269538], [113.309566, 35.270333], [113.306626, 35.270287], [113.305266, 35.271352], [113.305348, 35.274178], [113.307405, 35.276714], [113.323124, 35.282036], [113.324435, 35.283413], [113.330811, 35.285514], [113.335542, 35.285626], [113.336783, 35.286028], [113.337269, 35.287646], [113.336882, 35.289378], [113.333445, 35.290054], [113.329473, 35.290124], [113.327458, 35.290484], [113.326371, 35.292746], [113.321308, 35.294917], [113.320357, 35.299129], [113.319527, 35.303469], [113.31696, 35.309531], [113.315181, 35.312652], [113.311005, 35.313831], [113.303463, 35.315523], [113.298996, 35.317623], [113.296769, 35.31659], [113.295049, 35.316017], [113.292573, 35.314742], [113.291718, 35.31445], [113.290225, 35.313666], [113.28937, 35.313375], [113.285169, 35.311121], [113.281067, 35.307661], [113.279943, 35.306276], [113.278576, 35.305289], [113.278078, 35.304593], [113.274971, 35.301818], [113.27322, 35.299933], [113.271975, 35.298949], [113.271098, 35.297558], [113.269472, 35.295575], [113.268708, 35.294074], [113.268211, 35.293479], [113.267952, 35.29268], [113.265831, 35.290201], [113.264587, 35.289018], [113.263219, 35.288032], [113.261356, 35.286449], [113.260982, 35.285755], [113.259982, 35.284563], [113.259602, 35.28387], [113.256596, 35.280297], [113.25598, 35.279702], [113.255599, 35.279004], [113.25498, 35.278413], [113.253721, 35.276319], [113.252721, 35.275126], [113.252033, 35.274114], [113.251698, 35.272788], [113.251491, 35.270987], [113.24969, 35.266013], [113.24714, 35.265541], [113.245953, 35.266435], [113.246002, 35.26819], [113.245098, 35.268947], [113.244748, 35.268782], [113.24135, 35.269011], [113.239567, 35.268995], [113.238926, 35.268064], [113.239653, 35.26418], [113.239463, 35.263062], [113.238335, 35.261619], [113.238147, 35.260549], [113.23848, 35.25973], [113.240959, 35.25986], [113.242513, 35.259473], [113.2427, 35.257683], [113.238261, 35.257525], [113.231443, 35.256877], [113.231719, 35.256275], [113.229748, 35.256008], [113.229881, 35.255232], [113.232328, 35.255454], [113.232705, 35.254125], [113.233153, 35.253739], [113.23424, 35.253539], [113.235753, 35.252291], [113.235605, 35.251668], [113.234686, 35.251577], [113.233932, 35.25109], [113.233905, 35.249959], [113.234314, 35.249598], [113.235984, 35.249106], [113.237162, 35.247294], [113.23712, 35.245992], [113.237852, 35.245052], [113.238665, 35.243365], [113.239498, 35.241137], [113.240503, 35.240302], [113.243107, 35.238993], [113.243516, 35.238521], [113.243812, 35.236476], [113.244346, 35.234558], [113.245167, 35.233976], [113.246135, 35.230003], [113.246354, 35.229632], [113.246729, 35.227123], [113.247892, 35.214673], [113.254433, 35.202092], [113.255185, 35.19869], [113.254261, 35.198037], [113.253189, 35.194373], [113.251149, 35.192167], [113.243701, 35.191885], [113.237012, 35.193215], [113.227176, 35.192202], [113.223505, 35.191377], [113.224091, 35.18894], [113.226163, 35.178452], [113.227336, 35.172971], [113.237894, 35.167809], [113.238418, 35.165874], [113.243883, 35.164128], [113.249291, 35.163545], [113.252186, 35.162501], [113.255002, 35.161791], [113.257417, 35.161472], [113.259501, 35.161368], [113.261337, 35.161518], [113.261408, 35.160174], [113.261117, 35.159416], [113.258011, 35.158853], [113.252898, 35.159776], [113.24923, 35.161283], [113.243376, 35.161881], [113.238046, 35.164306], [113.233801, 35.164594], [113.2264, 35.163376], [113.226851, 35.161023], [113.224574, 35.160856], [113.224702, 35.159675], [113.224224, 35.159607], [113.224493, 35.157903], [113.224865, 35.157892], [113.224996, 35.156933], [113.224734, 35.156891], [113.225217, 35.155526], [113.20157, 35.156454], [113.198956, 35.158105], [113.194632, 35.160594], [113.189312, 35.163855], [113.194693, 35.164275], [113.195664, 35.164262], [113.195403, 35.166362], [113.194935, 35.167598], [113.196502, 35.167804], [113.196341, 35.168697], [113.19727, 35.168765], [113.196842, 35.169658], [113.196541, 35.170737], [113.197709, 35.170487], [113.197061, 35.17283], [113.197182, 35.173109], [113.1966, 35.173901], [113.195942, 35.174464], [113.194925, 35.174677], [113.194816, 35.176117], [113.193141, 35.17697], [113.193183, 35.176088], [113.192261, 35.176091], [113.19222, 35.176983], [113.191273, 35.176963], [113.191273, 35.177586]]]] } }] }
            console.log(geojson.features[0].geometry.coordinates[0]);
            let arr = []
            geojson.features[0].geometry.coordinates[0][0].forEach(item => {
                arr.push(item[0])
                arr.push(item[1])
            });
            console.log(arr);
            var polygonWithHole = new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray([73.0, 53.0, 73.0, 0.0, 135.0, 0.0, 135.0, 53.0]),
                    [new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(arr))]
                )
            });
            var geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole);
            let instances = [];
            instances.push(new Cesium.GeometryInstance({
                geometry: geometry,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#081122"))
                }
            }));
            function addRect(instances, left, down, right, up) {
                instances.push(new Cesium.GeometryInstance({
                    geometry: new Cesium.RectangleGeometry({
                        rectangle: Cesium.Rectangle.fromDegrees(left, down, right, up)
                    }),
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#081122"))
                    }
                }));
            }
            addRect(instances, -180.0, -90.0, 73.0, 90.0);
            addRect(instances, 135.0, -90.0, 180.0, 90.0);
            addRect(instances, 73.0, 53.0, 135.0, 90.0);
            addRect(instances, 73.0, -90.0, 135.0, 0.0);
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instances,
                appearance: new Cesium.PerInstanceColorAppearance({
                    flat: true,
                    translucent: false
                })
            }));
        }

        //提示
        document.querySelector('#tip').onclick = function () {
            alert('操作提示：单指平移，双指放大、缩小、旋转')
        }

        // 缩放至焦作
        const flytojiaozuo = () => {
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(113.14, 35.12, 100000),
                duration: 1
            });
        }

        //山阳区掩膜
        document.querySelector('#change').onclick = function () {
            flytojiaozuo()
            setTimeout(() => {
                dd("", viewer);
            }, 2000);
            setTimeout(() => {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(113.2594046791, 35.1896313714, 1500)
                })
            }, 4000);
        }

        //测绘学院3D模型展示和校园建筑白模加载
        document.querySelector('#showall').onclick = async function () {
            const buildingall = await Cesium.Cesium3DTileset.fromIonAssetId(2749125);
            const cehuixueyuan = await Cesium.Cesium3DTileset.fromIonAssetId(2746525);
            viewer.scene.primitives.add(cehuixueyuan);
            viewer.scene.primitives.add(buildingall);
            setTimeout(() => {
                viewer.camera.flyTo({
                    //(113.2524744711,35.1868425756,100),(113.2564197317, 35.1873338392, 100)
                    destination: Cesium.Cartesian3.fromDegrees(113.2543951384, 35.1870817375, 200),
                    orientation: {
                        heading: Cesium.Math.toRadians(-90),
                        pitch: Cesium.Math.toRadians(-40),
                        roll: Cesium.Math.toRadians(-5),
                    }
                })

            }, 1000);
        }


        let lastStage = null;

        // 雨
        const FS_Rain = `uniform sampler2D colorTexture;
            in vec2 v_textureCoordinates;
            uniform float tiltAngle;
            uniform float rainSize;
            uniform float rainWidth;
            uniform float rainSpeed;
            float hash(float x){
                  return fract(sin(x*233.3)*13.13);
            }
            out vec4 vFragColor;
            void main(void){
               float time = czm_frameNumber / rainSpeed;
               vec2 resolution = czm_viewport.zw;
               vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
               vec3 c=vec3(1.0,1.0,1.0);
               float a= tiltAngle;
               float si=sin(a),co=cos(a);
               uv*=mat2(co,-si,si,co);
               uv*=length(uv+vec2(0,4.9))*rainSize + 1.;
               float v = 1.0 - abs(sin(hash(floor(uv.x * rainWidth)) * 2.0));
               float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;
               c*=v*b;
               vFragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c,.3), .3);
            }
 `;

        // 添加雨
        const handleRain = (rainWidth, rainSpeed) => {
            removeStage();
            var rain = new Cesium.PostProcessStage({
                name: "hi_rain",
                fragmentShader: FS_Rain,
                uniforms: {
                    tiltAngle: 0.5, // 倾斜角度
                    rainSize: 0.6, // 雨大小
                    rainWidth, //雨长度
                    rainSpeed, //雨速
                },
            });
            viewer.scene.postProcessStages.add(rain);
            lastStage = rain;
        };

        // handleRain(20.0, 90.0);    //调用方式

        //移除
        const removeStage = () => {
            lastStage && viewer.scene.postProcessStages.remove(lastStage),
                (lastStage = null);
        };

        // 大雾
        const FS_Fog = `float getDistance(sampler2D depthTexture, vec2 texCoords)
        {
            float depth = czm_unpackDepth(texture(depthTexture, texCoords));
            if (depth == 0.0) {
                return czm_infinity;
            }
            vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);
            return -eyeCoordinate.z / eyeCoordinate.w;
        }
        //根据距离，在中间进行插值
        float interpolateByDistance(vec4 nearFarScalar, float distance)
        {
            //根据常识，雾应该是距离远，越看不清，近距离内的物体可以看清
            //因此近距离alpha=0，远距离的alpha=1.0
            //本例中设置可见度为200米
            //雾特效的起始距离
            float startDistance = nearFarScalar.x;
            //雾特效的起始alpha值
            float startValue = nearFarScalar.y;
            //雾特效的结束距离
            float endDistance = nearFarScalar.z;
            //雾特效的结束alpha值
            float endValue = nearFarScalar.w;
            //根据每段距离占总长度的占比，插值alpha，距离越远，alpha值越大。插值范围0,1。
            float t = clamp((distance - startDistance) / (endDistance - startDistance), 0.0, 1.0);
            return mix(startValue, endValue, t);
        }
        vec4 alphaBlend(vec4 sourceColor, vec4 destinationColor)
        {
            return sourceColor * vec4(sourceColor.aaa, 1.0) + destinationColor * (1.0 - sourceColor.a);
        }
        uniform sampler2D colorTexture;
        uniform sampler2D depthTexture;
        uniform vec4 fogByDistance;
        uniform vec4 fogColor;
        in vec2 v_textureCoordinates;
        void main(void)
        {
            //获取地物距相机的距离
            float distance = getDistance(depthTexture, v_textureCoordinates);
            //获取场景原本的纹理颜色
            vec4 sceneColor = texture(colorTexture, v_textureCoordinates);
            //根据距离，对alpha进行插值
            float blendAmount = interpolateByDistance(fogByDistance, distance);
            //将alpha变化值代入雾的原始颜色中，并将雾与场景原始纹理进行融合
            vec4 finalFogColor = vec4(fogColor.rgb, fogColor.a * blendAmount);
            out_FragColor = alphaBlend(finalFogColor, sceneColor);
        }`;

        // 添加雾
        const handleBigFog = () => {
            removeStage();
            var rain = new Cesium.PostProcessStage({
                name: "hi_fog",
                fragmentShader: FS_Fog,
                uniforms: {
                    fogByDistance: new Cesium.Cartesian4(500, 0.0, 4000, 0.8), //
                    fogColor: Cesium.Color.WHITE,
                },
            });
            viewer.scene.postProcessStages.add(rain);
            lastStage = rain;
        };

        const FS_Snow = `uniform sampler2D colorTexture;
            in vec2 v_textureCoordinates;
            uniform float rainSpeed;
            float snow(vec2 uv,float scale){
                float time = czm_frameNumber / rainSpeed;
                float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
                uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
                uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
                p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
                k=smoothstep(0.,k,sin(f.x+f.y)*0.01);
                return k*w;
            }
            out vec4 vFragColor;
            void main(void){
                vec2 resolution = czm_viewport.zw;
                vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
                vec3 finalColor=vec3(0);
                float c = 0.0;
                c+=snow(uv,50.)*.0;
                c+=snow(uv,30.)*.0;
                c+=snow(uv,10.)*.0;
                c+=snow(uv,5.);
                c+=snow(uv,4.);
                c+=snow(uv,3.);
                c+=snow(uv,2.);
                finalColor=(vec3(c));
                vFragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);
            }`;

        //添加雪
        const handleSnow = (rainSpeed) => {
            removeStage();
            var rain = new Cesium.PostProcessStage({
                name: "hi_snow",
                fragmentShader: FS_Snow,
                uniforms: {
                    rainSpeed, //雪速
                },
            });
            viewer.scene.postProcessStages.add(rain);
            lastStage = rain;
        };

        const weather = document.querySelector('#weather')
        weather.onchange = function () {
            console.log(weather.value);
            if (weather.value == 0) {
                handleRain(20.0, 90.0)
            } else if (weather.value == 1) {
                handleBigFog()
                viewer.camera.flyTo({
                    //(113.2524744711,35.1868425756,100),(113.2564197317, 35.1873338392, 100)
                    destination: Cesium.Cartesian3.fromDegrees(113.2568229495, 35.1873840474, 3500),
                    orientation: {
                        heading: Cesium.Math.toRadians(-90),
                        pitch: Cesium.Math.toRadians(-90),
                        roll: Cesium.Math.toRadians(-5),
                    }
                })
                setTimeout(() => {
                    viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(113.2543951384, 35.1870817375, 200),
                        orientation: {
                            heading: Cesium.Math.toRadians(-90),
                            pitch: Cesium.Math.toRadians(-40),
                            roll: Cesium.Math.toRadians(-5),
                        }
                    })
                }, 2000);
            } else if (weather.value == 2) {
                handleSnow(90.0)
            } else if (weather.value == 3) {
                removeStage();
            }
        }

    </script>
</body>

</html>